<template>
  <a-modal
    title="修改子账号权限"
    :visible="visible"
    @ok="onSubmit"
    @cancel="onCancel"
  >
    <a-form-model
      ref="ruleForm"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-model-item ref="ip" label="权限管理" prop="ip">
        <this-tree ref="tree" />
      </a-form-model-item>
    </a-form-model>
  </a-modal>
</template>
<script>
// import { mapGetters } from 'vuex'

import thisTree from './tree.vue'
export default {
  components: { thisTree },
  data() {
    return {
      visible: false,
      // row: null,
      checked: [],
      form: {
        ip: '',
      },
      rules: {
        ip: [{ required: true, message: 'Please input', trigger: 'blur' }],
      },
      options: [
        { label: 'Apple', value: 'Apple' },
        { label: 'Pear', value: 'Pear' },
        { label: 'Orange', value: 'Orange' },
      ],
    }
  },
  methods: {
    open(row) {
      console.log(row)
      // this.row = { ...row }
      this.form = row
      this.visible = true
      this.$nextTick(() => {
        this.$refs.tree.checkedKeys = row.perms
      })
    },
    onChange() {
      console.log(this.checked)
    },
    onSubmit() {
      this.axios
        .put(`/a/sub-admins/${this.form.id}/perms`, {
          perms: this.$refs.tree.checkedKeys,
        })
        .then((res) => {
          this.visible = false
          this.$message.success('修改成功')
          this.$emit('refresh')
          //   this.$emit('refresh')
        })
        .catch((err) => {
          this.$message.error('输入错误')
        })
    },
    onCancel() {
      // Object.assign(this.form, this.row)
      this.visible = false
    },
  },
}
</script>
